<template>
  <el-container class="home_container">
    <!--头部区域-->
    <el-header class="sskuang">
      <div class="lefttop">
        <router-link to="/components/main"
          ><img src="../assets/images/waterpoint.png" alt=""
        /></router-link>
        <span class="logoword"> 河湖空间大数据平台 </span>
      </div>
      <el-dropdown trigger="click" class="topdropdown">
        <span class="el-dropdown-link">
          {{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/components/historyupload/historyupload">
              历史上传文件
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/login"> 登出 </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-menu
        class="navigationtop"
        mode="horizontal"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#ffd04b"
        id="alltopnav"
      >
        <el-menu-item index="1">
          <router-link to="/components/main">首页</router-link>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <router-link to="/components/dataService/serviceone"
              >数据服务</router-link
            >
          </template>
          <el-menu-item index="2-1" class="secondmenu">
            <router-link to="/components/dataService/serviceone"
            >原始数据服务</router-link
            >
          </el-menu-item>
          <el-menu-item index="2-2" class="secondmenu">
            <router-link to="/components/dataService/service2one"
            >成果数据服务</router-link
            >
          </el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><router-link to="/components/Fileupload"
              >数据上传</router-link
            ></template
          >
          <el-menu-item index="3-1" id="ordinary">
            <template slot="title">
              <router-link to="/components/Fileupload">普通文件</router-link>
            </template>
          </el-menu-item>
          <el-menu-item index="3-2" class="secondmenu">
            <router-link to="/components/Filexmlupload"> 栅格数据 </router-link>
          </el-menu-item>
        </el-submenu>

        <!-- <el-menu-item index="6">
          <router-link to=""> 成果数据服务 </router-link>
        </el-menu-item> -->
        <el-submenu index="4">
          <template slot="title">
            <router-link to="/components/formcontrol/formcontrol"
              >专题数据处理</router-link
            >
          </template>
          <el-menu-item index="4-1" id="ordinary">
               <template slot="title">
              <router-link to="/components/formcontrol/formcontrol">形态管控专题</router-link>
            </template>
          </el-menu-item>

          <el-menu-item index="4-2" id="ordinary">
            <template slot="title">
              <router-link to="/components/formcontrol/groundClassification">地物分类专题</router-link>
            </template>
          </el-menu-item>

          <el-menu-item index="4-3" id="ordinary">
            <template slot="title">
              <router-link to="/components/formcontrol/waterInversion">水质反演专题</router-link>
            </template>
          </el-menu-item>

        </el-submenu>
        <el-menu-item index="5" @click="newsystem">
          <router-link to="">斧头湖应用示范</router-link>
        </el-menu-item>
        <el-menu-item index="6" @click="tiaozhuan">
          <!-- <router-link target="_blank" to="http://192.168.1.11:7180/">大数据集群管理</router-link></el-menu-item -->
          大数据集群管理</el-menu-item
        >
        <el-menu-item index="7">
          <router-link to="/components/about/about"> 关于 </router-link>
        </el-menu-item>
      </el-menu>

      <el-divider class="fenge"></el-divider>

      <el-form class="search_box">
        <el-input
          v-model="query"
          clearable
          placeholder="文件名称，地区，摘要"
          size="large"
          prefix-icon="el-icon-search"
          class="search_input"
        >
          <el-button slot="append" @click="searchbtn">搜索</el-button>
        </el-input>
        <div class="represent">
          <span class="crux">推荐关键词: </span>

          <a href="javascript:void(0)" v-on:click="test1">
            <el-tag size="small">{{ result1 }}</el-tag>
          </a>
          <a href="javascript:void(0)" v-on:click="test2">
            <el-tag size="small">{{ result2 }}</el-tag>
          </a>
          <a href="javascript:void(0)" v-on:click="test3">
            <el-tag size="small">{{ result3 }}</el-tag>
          </a>
          <a href="javascript:void(0)" v-on:click="test4">
            <el-tag size="small">{{ result4 }}</el-tag>
          </a>
          <a href="javascript:void(0)" v-on:click="test5">
            <el-tag size="small">{{ result5 }}</el-tag>
          </a>
          <a href="javascript:void(0)" v-on:click="test6">
            <el-tag size="small">{{ result6 }}</el-tag>
          </a>
        </div>
      </el-form>
    </el-header>
    <!--页面主体区域-->
    <el-container>
      <!--侧边栏-->

      <!--右侧内容主体-->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <!-- 底部 -->
    <el-footer>
      <el-row type="flex" class="row-foot" justify="center">
        <el-col :span="10">
          Copyright 2020-2022 湖北省水利水电科学研究院
          华中科技大学水电与数字化工程学院
        </el-col>
      </el-row>
      <el-row type="flex" class="row-foottwo" justify="center">
        <el-col :span="4"> 信息与控制研究所 技术支持 </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>


<script>
import { search } from "../Api/api"; //调用搜索的接口
import bus from "../Api/bus.js";
export default {
  data() {
    return {
      query: "", // 输入的关键字,
      result1: "斧头湖",
      result2: "遥感影像",
      result3: "年鉴",
      result4: "流量",
      result5: "降雨",
      result6: "水位",
    };
  },
  computed: {
    username() {
      let username = sessionStorage.getItem("username");
      return username ? username : this.name;
    },
  },
  methods: {
    searchbtn() {
      let that = this;
      // 第一个参数为标志变量，第二个参数为通信的值
      // bus.$emit("query", that.query);
      //用了两种传参方式
      if (that.$route.path == "/components/search/search") {
        bus.$emit("search", that.query);
      } else {
        that.$router.push({
          path: "/components/search/search",
          query: {
            query: that.query,
          },
        });
      }
    },
    test1: function () {
      this.query = this.result1;
    },
    test2: function () {
      this.query = this.result2;
    },
    test3: function () {
      this.query = this.result3;
    },
    test4: function () {
      this.query = this.result4;
    },
    test5: function () {
      this.query = this.result5;
    },
    test6: function () {
      this.query = this.result6;
    },

    //跳转新页面
    tiaozhuan() {
      window.open("http://192.168.1.11:7180/");
    },
    // tiaozhuanfth(){
    //    window.open("http://192.168.1.11:7180/");
    // }
    newsystem() {
      let decisionUrl =this.$router.resolve(
        {
          path:"/views/newSrc/newSystem",
        }
      );
      window.open(decisionUrl.href,'_blank')
    }
  },
};
</script>


<style lang="scss" scoped>
* {
  text-decoration: none;
}
// .home_container {
//   // position: relative;
// }
.sskuang {
  // background-color: #0188e7;
  background-color: #10546e;
  border-bottom: 1px solid #33a0ee;
  height: 200px !important;
  padding: 0px;
  position: relative;

  .lefttop {
    // margin-left: 50px;
    margin-left: 25px;
  }
  img {
    height: 45px;
    width: 45px;
    float: left;
    padding: 8px;
  }
  .logoword {
    float: left;
    font-size: 19px;
    font-weight: bold;
    line-height: 60px;
    color: #ffffff;
  }
  .topdropdown {
    position: absolute;
    right: 20px;
    top: 20px;
    color: white;
  }
  .navigationtop {
    // width: 70%;
    position: absolute;
    left: 21%;
    border-bottom: none;
  }
  .navigationtop a {
    color: #ffffff;
  }
  .fenge {
    position: absolute;
    top: 15%;
  }
  //搜索框
  .search_box {
    // width: 50%;
    // margin: 0 auto;
    // position: absolute;
    // top: 40%;
    // left: 25%;
    // border: 1px solid;
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 80px;
  }

  .represent {
    margin-top: 20px;
  }
  .represent .crux {
    color: white;
    font-size: 14px;
    padding-right: 30px;
  }
  .represent .el-tag {
    margin-right: 10px;
  }
}

.el-aside {
  background-color: #e4e7ed;
  border-radius: 4px;
}
.el-main {
  padding: 0px;
  padding-bottom: 50px;
  // background: #c1c1c121;
  background-color: white;
}
.home_container {
  height: 100%;
}

.el-footer {
  padding: 0px;
  height: 70px !important;
  background-color: #cac8c8;
  font-size: 14px;
  font-family: 微软雅黑;
  color: #666666;
  .row-foot {
    padding-top: 15px;
  }
  .row-foottwo {
    padding-top: 8px;
  }
}

.el-icon-upload,
.el-icon-download,
.el-icon-s-data,
.el-icon-message,
.el-icon-time,
.el-icon-view,
.el-icon-s-home {
  margin-left: 10px;
  margin-bottom: -18px;
  color: #93a1e6;
}

.navigationtop .el-menu-item:hover {
  background: #80afdd !important;
}
.navigationtop .el-submenu__title:hover {
  background: #80afdd !important;
}

.secondmenu {
  /* width: 120px; */
  text-align: center;
  color: #606266 !important;
  background: #f8f8f8 !important;
  border-bottom: 1px solid #e4e7ed;
}
.secondmenu:hover {
  color: #0188e7 !important;
  background: #f2f2f2 !important;
}
#ordinary {
  text-align: center;
  color: red !important;
  background: #f8f8f8 !important;
  border-bottom: 1px solid #e4e7ed;
}
#ordinary:hover {
  color: #0188e7 !important;
  background: #f2f2f2 !important;
}

#ordinary .el-submenu__title {
  color: #606266 !important;
  background: #f8f8f8 !important;
}
#ordinary .el-submenu__title:hover {
  color: #0188e7 !important;
  background-color: #fff !important;
}
</style>

<style>
#alltopnav .el-submenu__title {
  padding: 0px 5px !important;
}
</style>
